import { InjectionKey } from "@vue/runtime-core"
import {
  createStore,
  Store,
  StoreOptions,
  useStore as baseUseStore,
} from "vuex"
import createPersistedState from "vuex-persistedstate"
import { store as markdown, MarkdownState } from "./modules/markdown"
import { store as user, UserState } from "./modules/user"
import { store as fileTree, FileTreeState } from "./modules/fileTree"

import { store as editor, EditorState } from "./modules/editor"

export interface RootState {}
const state: RootState = {}

export interface TypeState extends RootState {
  markdown: MarkdownState
  user: UserState
  fileTree: FileTreeState
  editor: EditorState
}

export const key: InjectionKey<Store<TypeState>> = Symbol("storeKey")
export const store: StoreOptions<RootState> = createStore({
  state,
  modules: {
    markdown,
    user,
    fileTree,
    editor,
  },
  plugins: [
    createPersistedState({
      paths: ["user", "fileTree", "markdown"],
    }),
  ],
})

export function useStore() {
  return baseUseStore(key)
}
